Objects 101: Introduction to User Defined Objects

In JavaScript, as in other object-based languages, objects provide a common basis for combining related information into a single data structure. JavaScript objects provide properties (data fields) which store information and methods which implement object functionality. JavaScript is not object-oriented because it makes no provisions for inheritance.

Constructing Objects

To define a new object class, create a "constructor" function which constructs the new object. The new object is addressed as this in the constructor. Add any properties (fields) by appending "this" with a field name.

// Create a simple book object
function book(aTitle, anAuthor, pageCount)
{
    // set properties passed as parameters
    this.title = aTitle
    this.author = anAuthor
    this.pages = pageCount
    
    // not all properties need to be passed as parameters
    this.inCollection = true
}

Allocating Objects

Use the "new" statement to allocate new objects. Unlike object-oriented languages, JavaScript constructors add information and functionality to these new objects rather than creating "cookie cutter" data of a given size and format.

var book1 = new book('Tale of Two Cities', 'C. Dickens', 800)
var book2 = new book('The Hobbit', 'J. Tolkien', 500)

Addressing Properties

Properties can be addressed by either a period or brackets.

document.write('book1.title: '+book1.title+'<br>')
document.write('book1.title: '+book1["title"]+'<br>')

Viewing Properties

View an object's properties by iterating with the "in" directive.

function viewObject(anObject)
{
    for (prop in anObject)
        document.write('Property '+prop+': '+anObject[prop]+'<br>')
    document.write('<p>')
}

viewObject(book1)
viewObject(book2)

Extend Objects

You can extend existing objects "on the fly", outside of constructor functions. Each property is added individually to each object.

book1.binding='leather'
book1.paper='acid free'
book2.paper='parchment'
book2.edition='fifth'

viewObject(book1)
viewObject(book2)

The Undocumented "Object()" function

For now (although one can not know for how long), you can use the undocumented Object() function to create objects without writing a constructor.

var myObject = new Object()

myObject.width = 5
myObject.height= 10

viewObject(myObject)

Methods

Methods are easy to write. Simply assign functions in your constructors to create object methods.

// Format a Loan Record for Printing
function loanRecord()
{
    return('On Loan: '+this.book.title+' loaned to '+this.borrower)
}

// Loan Object: Store a loan
function loan(aBook, aBorrower)
{
    this.book = aBook
    this.borrower = aBorrower
    this.showloan = loanRecord // a Method
}

loan1 = new loan(book1, 'Mr. Smith')
document.write(loan1.showloan()+'<p>')

Undocumented Method Extensions

You can add methods to objects "on the fly" as well as properties. But remember! The method is added only to a single object at a time. If you tried to execute book2.titleLength() after the code below, you would generate an error; this method has not been added to book2.

// Characters in Title
function titleLength()
{
    document.write('Characters in Title: '+this.title.length+'<p>')
}

book1.titleLength = titleLength

book1.titleLength()